<template>
    <div class="flex column aimm-details-list" v-if="data" >
        <!-- <div class="header" >
            {{ data.header }}
        </div> -->
        <div class="flex-item" >
            <div class=" image-content" v-for="(item, idx) in data.lists" :key="idx" >
                <van-image :src="item" lazy-load custom-class="details-img" @click="previewImage(item)" />
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      url: null,
      data: null
    }
  },
  onShow () {
    const { u } = this.$root.$mp.query
    this.url = u
    this.init()
  },
  methods: {
    ...mapActions({
      getAiMMTUDetails: 'home/getAiMMTUDetails'
    }),
    init () {
      wx.showLoading()
      this.getAiMMTUDetails(this.url).then(res => {
        console.log(res)
        wx.hideLoading()
        this.data = res
        wx.setNavigationBarTitle({
          title: res.header
        })
      })
    },
    previewImage (item) {
      wx.previewImage({
        current: item, // 当前显示图片的http链接
        urls: this.data.lists
      })
    }
  }
}
</script>

<style lang="scss">
.aimm-details-list {
    .header {
        padding: 0.2rem 0.3rem;
        font-size: 0.28rem;
    }
    .image-content {
        display: inline-block;
        .details-img {
            width: 2.1rem;
            height: 2.8rem;
        }
    }
    .image-content + .image-content {
        margin-left: 0.3rem;
        margin-top: 0.2rem;
    }
    .image-content:nth-child(1) {
        margin-left: 0.3rem;
    }
}
</style>